interface InsightsPageProps {
  params: { userId: string };
}

export default function InsightsPage({ params: { userId } }: InsightsPageProps) {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div>
        <h1 className="text-3xl font-bold text-foreground">Insights</h1>
        <p className="text-muted-foreground mt-1">深入分析和智能洞察</p>
      </div>

      {/* 洞察概览 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {/* 用户增长洞察 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <span className="text-blue-600 dark:text-blue-400 text-lg">📈</span>
            </div>
            <span className="text-xs bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 px-2 py-1 rounded-full">
              +12.5%
            </span>
          </div>
          <h3 className="text-lg font-semibold text-foreground mb-1">用户增长</h3>
          <p className="text-sm text-muted-foreground">本月新增用户呈上升趋势</p>
        </div>

        {/* 收入趋势 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <span className="text-green-600 dark:text-green-400 text-lg">💰</span>
            </div>
            <span className="text-xs bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 px-2 py-1 rounded-full">
              +8.3%
            </span>
          </div>
          <h3 className="text-lg font-semibold text-foreground mb-1">收入增长</h3>
          <p className="text-sm text-muted-foreground">收入稳步增长，表现良好</p>
        </div>

        {/* 用户活跃度 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <span className="text-purple-600 dark:text-purple-400 text-lg">⚡</span>
            </div>
            <span className="text-xs bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 px-2 py-1 rounded-full">
              -2.1%
            </span>
          </div>
          <h3 className="text-lg font-semibold text-foreground mb-1">用户活跃度</h3>
          <p className="text-sm text-muted-foreground">需要提升用户参与度</p>
        </div>

        {/* 产品表现 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-10 h-10 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center">
              <span className="text-orange-600 dark:text-orange-400 text-lg">🎯</span>
            </div>
            <span className="text-xs bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 px-2 py-1 rounded-full">
              +15.7%
            </span>
          </div>
          <h3 className="text-lg font-semibold text-foreground mb-1">产品表现</h3>
          <p className="text-sm text-muted-foreground">核心产品表现超出预期</p>
        </div>
      </div>

      {/* 详细洞察 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 趋势分析 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <h2 className="text-xl font-semibold text-foreground mb-4">趋势分析</h2>
          <div className="space-y-4">
            <div className="p-4 bg-muted/50 rounded-lg">
              <div className="flex items-center justify-between mb-2">
                <h3 className="font-medium text-foreground">移动端使用量上升</h3>
                <span className="text-sm text-green-600 dark:text-green-400 font-medium">+23%</span>
              </div>
              <p className="text-sm text-muted-foreground">
                用户更倾向于使用移动设备访问应用，建议优化移动端体验。
              </p>
            </div>
            
            <div className="p-4 bg-muted/50 rounded-lg">
              <div className="flex items-center justify-between mb-2">
                <h3 className="font-medium text-foreground">社交分享功能受欢迎</h3>
                <span className="text-sm text-green-600 dark:text-green-400 font-medium">+45%</span>
              </div>
              <p className="text-sm text-muted-foreground">
                社交分享功能使用率大幅提升，推荐加强社交化功能。
              </p>
            </div>

            <div className="p-4 bg-muted/50 rounded-lg">
              <div className="flex items-center justify-between mb-2">
                <h3 className="font-medium text-foreground">搜索功能优化见效</h3>
                <span className="text-sm text-green-600 dark:text-green-400 font-medium">+18%</span>
              </div>
              <p className="text-sm text-muted-foreground">
                搜索结果准确性提升，用户搜索成功率明显改善。
              </p>
            </div>
          </div>
        </div>

        {/* 智能建议 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <h2 className="text-xl font-semibold text-foreground mb-4">智能建议</h2>
          <div className="space-y-4">
            <div className="flex items-start space-x-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
              <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span className="text-white text-xs">💡</span>
              </div>
              <div>
                <h3 className="font-medium text-foreground mb-1">优化推荐算法</h3>
                <p className="text-sm text-muted-foreground">
                  基于用户行为数据，建议调整内容推荐策略以提高用户粘性。
                </p>
              </div>
            </div>

            <div className="flex items-start space-x-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
              <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span className="text-white text-xs">🚀</span>
              </div>
              <div>
                <h3 className="font-medium text-foreground mb-1">推出新功能</h3>
                <p className="text-sm text-muted-foreground">
                  用户对协作功能需求强烈，建议优先开发团队协作相关功能。
                </p>
              </div>
            </div>

            <div className="flex items-start space-x-3 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
              <div className="w-6 h-6 bg-yellow-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span className="text-white text-xs">⚠️</span>
              </div>
              <div>
                <h3 className="font-medium text-foreground mb-1">关注用户流失</h3>
                <p className="text-sm text-muted-foreground">
                  新用户7天留存率有所下降，建议优化新用户引导流程。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 关键指标预测 */}
      <div className="bg-card rounded-xl p-6 border shadow-sm">
        <h2 className="text-xl font-semibold text-foreground mb-4">预测分析</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="text-center">
            <div className="text-3xl font-bold text-foreground mb-2">2,450</div>
            <div className="text-sm text-muted-foreground mb-1">预计下月新增用户</div>
            <div className="text-xs text-green-600 dark:text-green-400">比本月增长 15%</div>
          </div>
          
          <div className="text-center">
            <div className="text-3xl font-bold text-foreground mb-2">¥185K</div>
            <div className="text-sm text-muted-foreground mb-1">预计下月收入</div>
            <div className="text-xs text-green-600 dark:text-green-400">比本月增长 12%</div>
          </div>
          
          <div className="text-center">
            <div className="text-3xl font-bold text-foreground mb-2">89.2%</div>
            <div className="text-sm text-muted-foreground mb-1">预计用户满意度</div>
            <div className="text-xs text-green-600 dark:text-green-400">比本月提升 3%</div>
          </div>
        </div>
      </div>
    </div>
  );
} 